"use client";

import React, { useEffect, useState } from 'react';
import Image from 'next/image';

const Stats: React.FC = () => {
  // 使用客户端渲染来避免SSR hydration错误
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  // 定义内容
  const content = (
    <div className="container mx-auto px-4 max-w-7xl">
        <div className="text-center">
          <h1 className="text-4xl md:text-5xl font-semibold text-[#4E5469] mb-6 leading-tight">
            Optimize Ad Performance & Boost ROI
            <br />
            Effortless Video Testing
          </h1>

          <div className="flex justify-center space-x-4 mb-6">
            {[1, 2, 3].map((_, index) => (
              <div key={index}>
                <Image 
                  src="/images/green-star.png" 
                  alt="Green Star" 
                  width={32} 
                  height={32} 
                />
              </div>
            ))}
          </div>

          <p className="font-outfit text-[32px] font-normal leading-normal text-center flex justify-center items-center text-[#4E5469] mb-16 mx-auto w-[1200px] max-w-full">
            Nemo Video enables you to generate high-converting videos in bulk, precisely target audiences, and maximize ad effectiveness for greater returns
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="flex flex-col items-center">
              <div className="text-[64px] font-outfit font-bold text-[#7058F9] mb-4">2.5x</div>
              <div className="text-[20px] text-[#4E5469] font-medium">Higher Click-Through Rate</div>
            </div>

            <div className="flex flex-col items-center">
              <div className="text-[64px] font-outfit font-bold text-[#7058F9] mb-4">1.5x</div>
              <div className="text-[20px] text-[#4E5469] font-medium">Higher ROI</div>
            </div>

            <div className="flex flex-col items-center">
              <div className="text-[64px] font-outfit font-bold text-[#7058F9] mb-4">88%</div>
              <div className="text-[20px] text-[#4E5469] font-medium">Reduction in Production Costs</div>
            </div>
          </div>
        </div>
      </div>
  );

  // 使用客户端渲染
  return (
    <section className="py-20 bg-white">
      {isMounted ? content : 
        <div className="container mx-auto px-4 max-w-7xl min-h-[300px] flex items-center justify-center">
          <div className="text-center text-gray-400">Loading...</div>
        </div>
      }
    </section>
  );
};

export default Stats; 